<template>
  <div class="container">
    <div class="header">
      <div class="top">
        <div class="top-left">
          <div class="logo">
            <img
              width="28px"
              height="28px"
              src="../../assets/home/head/logo1.png"
              alt=""
            />
            <h2>湖州市数字国土空间</h2>
          </div>
        </div>
        <div class="selprovince">
          <select>
            <option>请选择</option>
            <option>浙江省</option>
          </select>
        </div>
        <div class="user">
          <ul>
            <li class="date">{{ dateday }}</li>
            <li>|</li>
            <li>
              <span class="iconuser">
                <img src="@/assets/home/head/user.png" alt="" />
              </span>
              <span class="text">Admin,您好</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="middle">
        <input type="text" placeholder="请输入搜索关键字" />
        <button class="search">搜索</button>
      </div>
      <!-- <div class="bottom"></div> -->
    </div>
    <div class="body"></div>

    <div class="main">
      <div class="left">
        <div class="importtask">重大任务</div>
        <div class="importcontent">
          <div class="tasklist">
            <ul class="leftul">
              <li>
                <a href="#">
                  <img
                    class="taskicon"
                    src="@/assets/home/main/l1.png"
                    alt=""
                  />
                  <p class="tasktxt">要素保障</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    class="taskicon"
                    src="@/assets/home/main/l2.png"
                    alt=""
                  />
                  <p class="tasktxt">用地改革</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    class="taskicon"
                    src="@/assets/home/main/l3.png"
                    alt=""
                  />
                  <p class="tasktxt">生态修复</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    class="taskicon"
                    src="@/assets/home/main/l4.png"
                    alt=""
                  />
                  <p class="tasktxt">地灾防治</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="center">
        <!-- 中间区域的布局 -->
        <ul class="nav-item1">
          <li class="itemf">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">我的任务</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >更多</el-button
                >
              </div>
              <div class="mytask">
                <div class="item1">
                  <img
                    class="img1"
                    src="@/assets/home/main/main-top-1.png"
                    alt=""
                  />
                  <span class="txt">要素保障</span>
                  <span class="title">盘活存量建设用地</span>
                  <span class="number"
                    ><span class="fontweight">10</span
                    ><span class="min">万亩</span></span
                  >
                </div>
                <div class="item2">
                  <img
                    class="img1"
                    src="@/assets/home/main/main-top-2.png"
                    alt=""
                  />
                  <span class="txt">用地改革</span>
                  <span class="title">上图入库</span>
                  <span class="number">
                    <span class="fontweight">100</span>
                    <span class="min">%</span>
                  </span>
                </div>
                <div class="item3">
                  <img
                    class="img1"
                    src="@/assets/home/main/main-top-3.png"
                    alt=""
                  />
                  <span class="txt">生态修复</span>
                  <span class="title">废弃矿山修复</span>
                  <span class="number">
                    <span class="fontweight">10</span>
                    <span class="min">座</span>
                  </span>
                </div>
              </div>
            </el-card>
          </li>
          <li class="itemr">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">我的办公</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >更多</el-button
                >
              </div>
              <div class="btns">
                <el-button type="primary" @click="Towindow">新建任务</el-button>
                <el-button type="primary" @click="Todo">待办事项</el-button>
                <el-button type="primary" @click="Todb">督办事项</el-button>
                <!-- <el-button type="primary">重要信息</el-button> -->
              </div>
            </el-card>
          </li>
        </ul>
        <ul class="nav-item2">
          <li class="itemf">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">核心指标</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >更多</el-button
                >
              </div>
              <div class="corepicture">
                <div class="coreitem">
                  <div class="coretxt">
                    上图入库率<span
                      ><img
                        width="10px"
                        height="10px"
                        src="@/assets/home/main/text.png"
                        alt=""
                    /></span>
                  </div>
                  <div class="coreinfo">
                    <div id="echarts"></div>
                    <ul class="zhibiao">
                      <li>
                        <div class="zbtext">年度目标</div>
                        <div class="zbpercent">
                          <span class="fontweight">100</span>
                          <span class="min">%</span>
                        </div>
                      </li>
                      <li>
                        <div class="zbtext">起始值</div>
                        <div class="zbpercent">
                          <span class="fontweight">0</span>
                          <span class="min">%</span>
                        </div>
                      </li>
                      <li>
                        <div class="zbtext">当前值</div>
                        <div class="zbpercent">
                          <span class="fontweight">0</span>
                          <span class="min">%</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="coreitem">
                  <div class="coretxt">
                    盘活城镇存量建设用地<span
                      ><img
                        width="10px"
                        height="10px"
                        src="@/assets/home/main/text.png"
                        alt=""
                    /></span>
                  </div>
                  <div class="coreinfo">
                    <div id="echarts1"></div>
                    <ul class="zhibiao">
                      <li>
                        <div class="zbtext">年度目标</div>
                        <div class="zbpercent">
                          <span class="fontweight">10</span>
                          <span class="min">万亩</span>
                        </div>
                      </li>
                      <li>
                        <div class="zbtext">起始值</div>
                        <div class="zbpercent">
                          <span class="fontweight">10</span>
                          <span class="min">万亩</span>
                        </div>
                      </li>
                      <li>
                        <div class="zbtext">当前值</div>
                        <div class="zbpercent">
                          <span class="fontweight">0</span>
                          <span class="min">万亩</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-card>
          </li>
          <li class="itemr">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">工作动态</span>
              </div>
              <div class="jobtask">
                <ul>
                  <li>
                    <div class="notice">
                      <el-tooltip
                        content='发布<<浙江省"数字国土空间">>建设方案'
                        placement="top"
                      >
                        <span>
                          <a href="#"
                            >发布&lt;&lt;浙江省"数字国土空间"&gt;&gt;建设方案</a
                          >
                        </span>
                      </el-tooltip>
                    </div>
                    <div class="job-date">2021-05-22</div>
                  </li>
                  <li>
                    <div class="notice">
                      <el-tooltip
                        content="召开数字化改革领导小组第一次全体会议"
                        placement="top"
                      >
                        <span>
                          <a href="#">召开数字化改革领导小组第一次全体会议</a>
                        </span>
                      </el-tooltip>
                    </div>
                    <div class="job-date">2021-05-22</div>
                  </li>
                  <li>
                    <div class="notice">
                      <el-tooltip
                        content="分管局领导听取输转工作已近汇报"
                        placement="top"
                      >
                        <span>
                          <a href="#">分管局领导听取输转工作已近汇报</a>
                        </span>
                      </el-tooltip>
                    </div>
                    <div class="job-date">2021-05-22</div>
                  </li>
                  <li>
                    <div class="notice">
                      <el-tooltip
                        content="自然资源数字化改革专班成立"
                        placement="top"
                      >
                        <span>
                          <a href="#">自然资源数字化改革专班成立</a>
                        </span>
                      </el-tooltip>
                    </div>
                    <div class="job-date">2021-05-22</div>
                  </li>
                </ul>
              </div>
            </el-card>
          </li>
        </ul>
        <ul class="nav-item3">
          <li class="itemf">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">一键达</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >更多</el-button
                >
              </div>
              <div class="yijianda">
                <div class="yj-l">
                  <div>
                    <button class="yjbtn" round>地政审批</button>
                  </div>
                  <button class="yjbtn" round>规划实施监督</button>
                </div>
                <div class="yj-c">
                  <div>
                    <img
                      src="@/assets/home/main/arrow-c.png"
                      width="120"
                      height="80"
                    />
                  </div>
                  <!-- <button  class="yjbtn" round style="background-color:blue">系统门户</button> -->
                </div>
                <div class="yj-r">
                  <button class="yjbtn" round>矿政审批</button>
                  <button class="yjbtn" round @click="Tomap">一体化审批</button>
                </div>
              </div>
            </el-card>
          </li>
          <li class="itemr">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="task1">一张图</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >更多</el-button
                >
              </div>
              <div class="dtpicture">
                <img src="@/assets/home/main/dt.png" alt="" @click="Todt" />
              </div>
            </el-card>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="application">应用场景</div>
        <div class="appconent">
          <ul class="rightul">
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r1.png" alt="" />
                <div class="apptxt">规划协同</div>
              </a>
            </li>

            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r2.png" alt="" />
                <div class="apptxt">码上批地</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r3.png" alt="" />
                <div class="apptext3">不动产登记</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r4.png" alt="" />
                <div class="apptxt">藏粮于地</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r5.png" alt="" />
                <div class="apptxt">天巡地查</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r6.png" alt="" />
                <div class="apptxt">地灾智治</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r7.png" alt="" />
                <div class="apptxt">用矿审批</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r8.png" alt="" />
                <div class="apptxt">用海审批</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r9.png" alt="" />
                <div class="apptxt">生态修复</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r10.png" alt="" />
                <div class="apptxt">三改一拆</div>
              </a>
            </li>
            <li>
              <a href="#">
                <img class="appicon" src="@/assets/home/main/r11.png" alt="" />
                <div class="apptxt">地信服务</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入eachts文件
import echarts from "echarts";
// import "echarts/theme/macarons";
// import OperatorRender from "../example/OperatorRender.vue";
export default {
  data() {
    return {
      dateday: "",
    };
  },
  // components: { OperatorRender },
  mounted() {
    this.drawPie();
    this.drawPie1();
    this.getDate();
  },
  methods: {
    drawPie() {
      const mychart = echarts.init(document.getElementById("echarts"));
      let option = {
        color: ["#0E53FD", "#F1F2F3"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "100%"],
            avoidLabelOverlap: true,
            label: {
              // show: false,
              // position: "center",
              normal: {
                show: true,
                position: "center",
                formatter: function () {
                  return "30%";
                },
                textStyle: {
                  fontSize: 10,
                  color: "#0E53FD",
                  fontWeight: 700,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 200, name: "直接访问" },
              { value: 600, name: "搜索引擎" },
            ],
          },
        ],
      };
      mychart.setOption(option);
    },
    //图表2
    drawPie1() {
      const mychart1 = echarts.init(document.getElementById("echarts1"));
      let option = {
        color: ["#0E53FD", "#F1F2F3"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "100%"],
            avoidLabelOverlap: true,
            label: {
              // show: false,
              // position: "center",
              normal: {
                show: true,
                position: "center",
                formatter: function () {
                  return "30%";
                },
                textStyle: {
                  fontSize: 10,
                  color: "#0E53FD",
                  fontWeight: 700,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 200, name: "直接访问" },
              { value: 600, name: "搜索引擎" },
            ],
          },
        ],
      };
      mychart1.setOption(option);
    },

    getDate() {
      const date = new Date();
      const year = date.getFullYear();
      const monuth = date.getMonth() + 1;
      const day = date.getDate();
      return (this.dateday = year + "年" + monuth + "月" + day + "日");
    },
    // 跳到窗口
    Towindow() {
      window.localStorage.setItem("menuIndex", 1);
      window.localStorage.setItem("menuKey", "zhck");
      this.$router.push("/integratedWindow/integratedAccept");
    },
    // 跳到代办箱
    Todo() {
      window.localStorage.setItem("menuIndex", 3);
      window.localStorage.setItem("menuKey", "ywsp");
      this.$router.push("/todoBox");
    },
    // 跳到督办箱
    Todb() {
      window.localStorage.setItem("menuIndex", 3);
      window.localStorage.setItem("menuKey", "ywsp");
      this.$router.push("/businessApproval/urgeBox");
    },
    Todt() {
      this.$router.push("gmap/map2D");
    },
    Tomap() {
      this.$router.push("gmap/map2D");
    },
  },
};
</script>
  
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul li {
  list-style: none;
}
// 加粗的样式
.number .fontweight {
  font-weight: bold;
  font-size: 24px;
}
// 缩小的样式
.number .min {
  font-size: 6px;
}
// 核心指标中加粗样式
.zbpercent .fontweight {
  font-weight: bold;
  font-size: 24px;
}
.zbpercent .min {
  font-size: 6px;
}

.task1 {
  font-weight: bold;
}
.container {
  width: 100%;
  position: relative;
}

//头部样式开始
.header {
  width: 100%;
  height: 375px;
  background-image: url("../../assets/home/head/background.png");
}
.header .top {
  padding-top: 24px;
  height: 60px;
  // .logo {
  //   // float: left;
  //   margin-left: 11px;
  //   margin-right: 20px;
  // }
  // .selprovince {
  //   float: left;
  //   width:200px;
  // }

  // .selprovince select {
  //   margin-top: 10px;
  //   margin-left: 20px;
  //   border: none;
  //   background-color: transparent;
  //   color: #ccc;
  // }
  .top-left {
    float: left;
    height: 50px;
    width: 500px;
    .logo {
      height: 50px;
      width: 330px;
      margin-left: 11px;
      // margin-right: 20px;
      img {
        margin-left: 8px;
        float: left;
      }
      h2 {
        float: right;
        color: #fff;
        font-size: 28px;
        margin-right: 8px;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
  }
  .selprovince {
    float: left;
  }
  select {
    margin-top: 10px;
    margin-left: -100px;
    border: none;
    background-color: transparent;
    color: #ccc;
  }
  .user {
    float: right;
    .iconuser {
      margin: 0 10px 0 8px;
    }
    .date {
      margin: 0 8px 0 8px;
    }
    ul li {
      display: inline-block;
      color: white;
    }
  }
}

.header .middle {
  position: relative;
  // padding-top: 50px;
  margin-top: 30px;
  height: 60px;
  input {
    text-indent: 1em;
    float: left;
    width: 632px;
    height: 56px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    // margin-left: 500px;
    border-radius: 28px;
    border: none;
    outline: none; // 获取焦点时不显示边框
  }
}

.middle .search {
  position: absolute;
  top: 48%;
  left: 61%;
  // transform: translate(-20%,-50%);
  height: 40px;
  line-height: 40px;
  width: 100px;
  border: none;
  border-radius: 40px;
  background-color: blue;
  color: white;
}
//body的样式
.body {
  width: 100%;
  height: 850px;
  background-color: #eeeeef;
}

// main的样式开始
.main {
  position: absolute;

  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1392px;
  // background-color: orchid;
}
.main .left {
  float: left;
  width: 219px;
  // background-color: pink;
  .importtask {
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    font-family: "Alibaba PuHuiTi";
    text-align: center;
  }
  .importcontent {
    height: 941px;
    width: 219px;
    //  background-color: white;
    border-radius: 10px;
    .tasklist {
      width: 219px;
      height: 941px;
      background-image: url("../../assets/home/main/main-leftb.png");
      background-size: 265px 985px;
      background-position: 27% 55%;
      background-repeat: no-repeat;
      .leftul {
        height: 100%;
      }
      .leftul li {
        padding-top: 20px;
        margin-bottom: 40px;
        height: 50px;
      }
      .leftul li a {
        display: block;
        height: 60px;
        .taskicon {
          margin-left: 20px;
          float: left;
        }
        .tasktxt {
          float: right;
          margin-top: 10px;
          margin-right: 55px;
        }
      }
    }
  }
}
.main .center {
  margin-top: 48px;
  width: 952px;
  float: left;
  // background-color: yellowgreen;
  // 1区域
  .nav-item1 {
    width: 100%;
    display: flex;
    li {
      flex: 1;
    }
    .itemf {
      margin: 0 19px 0 19px;
      .el-card {
        width: 448px;
        height: 340px;
        border-radius: 10px;
        .mytask {
          .item1 {
            width: 415px;
            height: 60px;
            background-image: url("../../assets/home/main/main-top-g.png");
            background-size: 100% 100%;
            .img1 {
              float: left;
              margin: 12px 0 0 20px;
            }
            .txt {
              float: left;
              font-size: 18px;
              font-weight: bold;
              margin-left: 20px;
              margin-top: 18px;
              color: blue;
            }
            .title {
              float: left;
              margin-left: 50px;
              margin-top: 18px;
              font-size: 14px;
            }
            .number {
              float: right;
              margin-top: 16px;
              color: blue;
            }
          }

          .item2 {
            width: 415px;
            height: 60px;
            margin-top: 20px;
            background-image: url("../../assets/home/main/main-top-g.png");
            background-size: 100% 100%;
            .img1 {
              float: left;
              margin: 12px 0 0 20px;
            }
            .txt {
              float: left;
              font-size: 18px;
              font-weight: bold;
              margin-left: 20px;
              margin-top: 18px;
              color: blue;
            }
            .title {
              float: left;
              margin-left: 50px;
              margin-top: 18px;
              font-size: 10px;
            }
            .number {
              float: right;
              margin-top: 16px;
              margin-right: 10px;
              color: blue;
            }
          }
          .item3 {
            width: 415px;
            height: 60px;
            margin-top: 20px;
            background-image: url("../../assets/home/main/main-top-g.png");
            background-size: 100% 100%;
            .img1 {
              float: left;
              margin: 12px 0 0 20px;
            }
            .txt {
              float: left;
              font-size: 18px;
              font-weight: bold;
              margin-left: 20px;
              margin-top: 18px;
              color: blue;
            }
            .title {
              float: left;
              margin-left: 50px;
              margin-top: 18px;
              font-size: 10px;
            }
            .number {
              float: right;
              margin-top: 16px;
              margin-right: 15px;
              color: blue;
            }
          }
        }
      }
    }
    .itemr {
      height: 340px;
      margin: 0 19px 0 0;
      .el-card {
        height: 340px;
        border-radius: 10px;
        .btns {
          text-align: center;
        }
        .btns .el-button {
          width: 108px;
          height: 42px;
        }
      }
    }
  }
  // 2 区域
  .nav-item2 {
    width: 100%;
    display: flex;
    margin-top: 18px;
    li {
      flex: 1;
    }
    .itemf {
      height: 289px;
      margin: 0 19px 0 19px;
      .corepicture {
        height: 180px;
      }
      .el-card {
        height: 289px;
        border-radius: 10px;

        .coreitem {
          margin-bottom: 10px;
          .coretxt {
            font-size: 8px;
            margin-top: -10px;
            img {
              margin-left: 5px;
            }
          }
          .coreinfo {
            height: 75px;
            margin-top: 10px;
            #echarts {
              float: left;
              width: 65px;
              height: 65px;
              margin-left: 10px;
              // border: 1px solid red;
            }
            .zhibiao {
              float: right;
              display: flex;
              width: 250px;
              li {
                float: left;
                flex: 1;
                margin-left: 10px;
                .zbtext {
                  font-size: 14px;
                }
                .zbpercent {
                  margin-top: 5px;
                  color: blue;
                  text-align: center;
                }
              }
            }
          }
        }

        #echarts1 {
          float: left;
          width: 65px;
          height: 65px;
          margin-left: 10px;
          // border: 1px solid red;
        }
      }
    }
    .itemr {
      width: 445px;
      height: 289px;
      margin: 0 19px 0 0;
      .el-card {
        height: 289px;
        border-radius: 10px;
        .jobtask ul {
          height: 189px;
        }
        .jobtask ul li {
          margin-bottom: 30px;
          list-style-type: disc;
          color: blue;
          margin-left: 10px;
          span {
            font-size: 14px;
            color: black;
          }
          .notice {
            float: left;
            width: 257px;
            height: 25px;
            // border: 1px solid red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .job-date {
            float: right;
            // width:57px;
            font-size: 14px;
            color: #000000;
          }
        }
      }
    }
  }
  // 3区域
  .nav-item3 {
    width: 100%;
    display: flex;
    margin-top: 21px;
    li {
      flex: 1;
      // border: 1px solid red;
    }
    .itemf {
      height: 273px;
      margin: 0 19px 0 19px;
      .el-card {
        height: 273px;
        border-radius: 10px;
        .yijianda {
          height: 140px;
          margin: 10px 0 40px 0;
          display: flex;
          .yjbtn {
            width: 130px;
            height: 42px;
            border-radius: 21px;
            border: 1px solid skyblue;
            text-align: center;
            font-size: 8px;
            background-color: #fff;
          }
          .yj-l {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .yj-c {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            button {
              color: white;
            }
          }
          .yj-r {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
    }
    .itemr {
      height: 273px;
      margin: 0 19px 0 0;
      .el-card {
        height: 273px;
        border-radius: 10px;
        .dtpicture {
          position: relative;
          width: 414px;
          height: 170px;
          img {
            transform: scale(0.67, 0.6);
            margin-top: -70px;
            margin-left: -110px;
          }
          // border: 1px solid rebeccapurple;
          // background-image: url(../../assets/home/main/dt.png);
          // background-size: cover;
          // background-repeat:no-repeat;
          // background-position: center;
        }
      }
    }
  }
}

.main .right {
  float: right;
  width: 220px;
  height: 941px;
  // background-color: powderblue;
  .application {
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    font-family: "Alibaba PuHuiTi";
    text-align: center;
  }
  .appconent {
    width: 220px;
    height: 941px;
    background-color: white;
    border-radius: 10px;
    .rightul {
      height: 100%;
    }
    .rightul li {
      padding-top: 20px;
      margin-bottom: 20px;
      height: 40px;
    }
    .rightul li a {
      display: block;
      height: 40px;
      .appicon {
        margin-left: 20px;
        float: left;
      }
      .apptxt {
        float: right;
        margin-right: 60px;
        margin-top: 5px;
      }
      .apptext3 {
        margin-left: 80px;
      }
    }
  }
}
</style>